$(function () {


    var shop_list = (function () {
        if (localStorage.getItem("cart")) {
            return JSON.parse(localStorage.getItem("cart"));
        } else {
            return {};
        }
    })();

    var options = {
        url: "http://127.0.0.1:5500/iqiyi/project/src/date.json",
        dataType: "json"
    };

    $.ajax(options)
        .done(function (res) {
            render(res.data.filter(function (item) {
                for (var attr in shop_list) {
                    if (item.id == attr) {

                        item.count = shop_list[attr];
                        return true;
                    }
                }
                return false;
            }));
        });

    function render(data) {
        var html = data.map(function (item) {
            return `<tbody data-par="test">
                <tr class="myCar_tableBd_titleTr">
                    <td colspan="6">
                        <div class=" myCar_titleInner" data-opera="a-b">
                            <div class="checkBox-order checkBox-order-selected"
                                data-delegate="product-shop-all">
                                <input class="checkBox" type="checkbox" name="" value="false">
                                <label for="" data-box-shop="shop">勾选此店铺下所有商品</label>
                            </div>
                            <div class="shop_info">
                                <div class="shop_info_site"><i class="pack_icon "></i>由<a
                                        href="javascript:void(0);" data-shop-id="1610804476"
                                        data-shop-name="深圳市万里牛贸易有限公司"
                                        data-shop-contact="17727475805" data-shop-showlink=""
                                        class="shop_site" rseat="1501231_entst">${item.store}</a>发货
                                   
                                    <a class="online_link dn"
                                        href="http://wpa.qq.com/msgrd?v=3&amp;uin=507924452&amp;site=&amp;menu=yes"
                                        rseat="1501231_cntctus"
                                        data-pb="r=万里牛数码专营店&amp;stno=1610804476"
                                        j-delegate="openContactServantWindow"
                                        data-shopid="1610804476"></a>
                                </div>
                            </div>
                            
                           
                        </div>
                    </td>
                </tr>
             


                <tr class="myCar_bdTr J_cart-goods  myCar_selectedBg" j-delegate="cartGoods"
                    data-goods-id="36335312" data-shopcart-type="goods">
                    <td class="select_td" data-opera="a-b-c">
                        <div class="select-all">
                            <div class="checkBox-order checkBox-order-selected"
                                data-goods-itemid="36335312" data-delegate="product-only"
                                data-global-good="0">
                                <input class="checkBox" type="checkbox" name="" value="false">
                                <label for="" data-box-only="only">勾选购物车内所有商品</label>
                            </div>
                        </div>
                    </td>
                    <td class="baobei">
                        <a href="/item/19rrobqr9w" target="_blank" class="activity_pic">
                            <img width="80" height="80"
                                src="${item.src}"
                                alt="【带充电仓】Hnew 双耳蓝牙耳机 无线运动耳机 苹果安卓通用">
                        </a>
                        <div class="orderItems_content promotions_line">
                            <div class="orderItems_link">
                                <a target="_blank" href="/item/19rrobqr9w">${item.title}</a>
                            </div>
                            <div class="orderItems_about">
                                <p class="info_section">
                                    <span class="tx-inline">颜色分类: 【mini升级版】白色</span>
                                </p>
                            </div>
                            
                        </div>
                    </td>
                    <td class="price">
                      

                        <div class="price_inner">
                            <em class="price-original">147.25</em>
                        </div>
                        <div class="price_inner">
                            <em class="price-now">58.9</em>
                        </div>
                        <a href="javascript:void(0);" j-delegate="promotionTip" class="buyCar_cx">
                            促销
                            <div class="headerBar_triangle">
                                <i class="detailArrow-inner"></i>
                                <i class="detailArrow-outer"></i>
                            </div>
                            <div class="headerBar_triangle_hover dn">
                                <i class="detailArrow-inner"></i>
                                <i class="detailArrow-outer"></i>
                            </div>
                            <div class="cx_info dn">
                                <p>促销：限时特惠价</p>
                                <p>优惠：${item.price}</p>
                            </div>
                        </a>
                    </td>
                  
                    <td class="nub ">
                        <div class="nub_inner J_amountItems">
                            <div class="nub_innItem">
                               
                                <span class="mod-amount" data-mod="opera" data-productid="0001"
                                    data-product-price="147.25" data-product-maxnum="602">
                                    <input type="text" class="amount-input J_amount-tx" value="2"
                                        maxlength="8" title="请输入购买量" data-max="602" data-now=""
                                        data-shopcart-type="tx" data-original-value="2">
                                    <span class="amount-btn">
                                      
                                        <span class="fl amount-increase  "
                                            data-disabledclass="amount-increase-no"
                                            data-shopcart-type="plus"></span>
                                        <span class="amount-decrease  "
                                            data-disabledclass="amount-decrease-no"
                                            data-shopcart-type="minus"></span>
                                    </span>
                                  
                                </span>
                            </div>

                            <div class="nub_innerItem ">
                                <span class="addrF_erro J_amount_prompt dn">库存不足</span>
                            </div>


                        </div>
                    </td>
                    <td class="disbursements">
                        <div class="disbursements_inner">
                            <em class="sumItems_price" data-product-totalprice="sumItems-price">
                                117.8</em>
                        </div>
                    </td>
                    <td class="trade_operate">
                        <div class="trade_operateInner">
                            <div class="operateItems">
                                <a href="javascript:void(0);" class="toFav  "
                                    data-goods-itemid="36335312" data-shopcart-type="favorite"
                                    rseat="1501231_fav"
                                    data-pb="stno=1610804476&amp;itemId=398565624">移入收藏夹</a>
                            </div>
                            <div class="operateItems">
                                <a href="javascript:void(0);" class="del"
                                    data-shopcart-type="del">删除</a>
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>`;
        }).join("");

        $(".myCar_tableBd").html(html);
    }


    // DOM对象的选择，DOM对象的事件绑定; 
    // $(".amount-decrease").click(function () {
    //     changeGoodsCount($(this).index(".amount-decrease"), "reduce")
    // });
    // $(".amount-increase").click(function () {
    //     changeGoodsCount($(this).index(".amount-increase"), "add")
    // });
    $(".myCar_tableBd").on("click", ".amount-decrease", function () {
        changeGoodsCount($(this).index(".amount-decrease"), "reduce")
    })
    $(".myCar_tableBd").on("click", ".amount-increase", function () {
        changeGoodsCount($(this).index(".amount-increase"), "add")
    })

    $(".myCar_tableBd").on( "click" , ".del" , function () {
        removeGoods($(this).index(".del"))
    });
    // 更改商品数量 
    function changeGoodsCount(index, type) {
        var $goods_count = $(".J_amount-tx").eq(index);
        var count = $goods_count.val();
        // 如果是减，那么我们需要判定count为1的情况; 
        if (count <= 1 && type === "reduce") {
            if (confirm("是否要删除当前商品!")) {
                removeGoods(index);
            }
            return false;
        }
        // 分成reduce减，还有add加; 
        switch (type) {
            case "add":
                count++; break;
            case "reduce":
                count--; break;
        }

        $goods_count.val(count);

        var price = $(".price-now").eq(index).html().replace(/,/g, "");
        // - 和商品数量进行计算得到对应的小计总价; 
        var total = price * count;
        $(".sumItems_price").eq(index).html(total);

        
        // 在小计商品计算的时候要得知当前的商品是否被选中， 如果被选中
        // 我们才去触发商品总价计算功能; 
        if ($(".checkBox input[type=checkbox]").eq(index).prop("checked")) {
            // 计算商品总价的封装; 
            calculatTotalPrice();
        }
    }

    // 删除商品 
    function removeGoods(index) {
        $(".goods-item").eq(index).remove();
        calculatTotalPrice();
    }
    // 做商品价格总计 : 
    // - 找到合适的调用时机 : 
    //   - 商品数量改变的时候需要重新计算总价; 
    //   - 勾选商品的时候需要计算总价; 

    // - 商品勾选的事件 : 

    $(".checkBox input[type=checkbox]").change(function () {
        // 触发总价计算功能; 
        // console.log("总价计算");
        calculatTotalPrice();
    });
    // 计算商品总价; 
    function calculatTotalPrice() {
        // each : 遍历功能; 
        var total = 0;
        var amount = 0;
        $(".goods-item").each(function () {
            // this : 每一个元素; 
            // 找到元素之中的checkbox看看是否被选中; 
            // 如果被选中再进行计算，否则不进行计算; 
            // 在这里如果使用return false那么会立即终止掉each功能; 
            // 所以在这里只是用return 功能; 
            if (!$(this).find(".check-box input").prop("checked")) return;
            // 计算 : 
            var price = $(this).find(".price span").html().replace(/,/g, "");
            var count = $(this).find(".goods-count").val();
            total += price * count;
            amount++;
        });
        $(".price-show span:eq(1)").html("￥" + total);
        $(".amount-sum em").html(amount);
    }

    // 全选逻辑 : 
    // - 如果全选按钮被选中，那么所有按钮都会被选中; 
    // - 如果全选按钮被取消选中，那么所有按钮都会被取消选中; 
    $(".select-all input[type=checkbox]").change(function () {
        $(".check-box input[type=checkbox]").prop("checked", $(this).prop("checked"));
        calculatTotalPrice();
    });

    // 删除选中的商品 : 
    $(".operation a:eq(0)").click(function () {
        $(".goods-item").each(function () {
            // 判定如果当前商品被选中了，那么就删除当前商品; 
            if ($(this).find(".check-box input").prop("checked")) {
                $(this).remove();
            }
        });
        calculatTotalPrice();
    });

    $(".operation a:eq(1)").click(function () {
        $(".goods-item").remove();
        calculatTotalPrice();
    });


});